<template>
  <div class="fullheight">
    <ht-table
      ref="htTable"
      :data="rows"
      :pageResult="pagination"
      :selection="true"
      quick-search-props="mc"
      :show-export="false"
      :show-custom-column="false"
      @loading="loadData"
    >
      <template v-slot:toolbar>
        <el-button-group>
          <el-button size="small" @click="showDialog()" icon="el-icon-plus"
            >添加</el-button
          >
          <el-button
            size="small"
            @click="initDefaultProperty()"
            icon="el-icon-refresh"
            >初始化默认属性</el-button
          >
          <el-button
            v-popconfirm="{before: removeValid, confirm: handleRemove}"
            type="danger"
            icon="el-icon-delete"
            >删除</el-button
          >
        </el-button-group>
      </template>
      <template v-slot:search>
        <ht-table-search-panel
          :divide="3"
          :label-width="100"
          display-style="block"
        >
          <ht-table-search-field label="名称" prop="mc" />
          <ht-table-search-field label="别名" prop="bm" />
          <ht-table-search-field
            label="分组"
            type="select"
            :options="groupList"
            prop="fz"
          />
        </ht-table-search-panel>
      </template>
      <template>
        <ht-table-column type="index" width="50" align="center" label="序号" />
        <ht-table-column
          prop="mc"
          label="名称"
          width="200"
          :show-overflow-tooltip="true"
        >
          <template v-slot="{row}">
            <el-link
              type="primary"
              @click="showDialog(row.pksxid)"
              title="查看详情"
              >{{ row.mc }}</el-link
            >
          </template>
        </ht-table-column>
        <ht-table-column
          prop="bm"
          label="别名"
          width="200"
          :show-overflow-tooltip="true"
        >
        </ht-table-column>
        <ht-table-column
          prop="mrz"
          label="默认值"
          :show-overflow-tooltip="true"
        >
        </ht-table-column>
        <ht-table-column
          prop="kjlx"
          label="控件类型"
          width="120"
          :show-overflow-tooltip="true"
          :filters="controlTypeList"
        >
          <template v-slot="{row}">
            <el-tag v-if="row.kjlx == 'number'">数字</el-tag>
            <el-tag v-if="row.kjlx == 'select'">下拉框</el-tag>
          </template>
        </ht-table-column>
        <ht-table-column prop="fz" label="分组" :show-overflow-tooltip="true">
        </ht-table-column>
        <ht-table-column prop="ms" label="描述" :show-overflow-tooltip="true">
        </ht-table-column>
        <ht-table-column
          prop="xjsj"
          label="创建时间"
          width="160"
          :sortable="true"
          :show-overflow-tooltip="true"
        >
        </ht-table-column>
        <ht-table-column
          prop="gxsj"
          label="更新时间"
          width="160"
          :sortable="true"
          :show-overflow-tooltip="true"
        >
        </ht-table-column>
      </template>
    </ht-table>
    <property-manager-edit ref="propertyManagerEdit"></property-manager-edit>
  </div>
</template>
<script>
import course from '@/api/course.js'
const propertyManagerEdit = () =>
  import('@/views/course/property/PropertyManagerEdit.vue')

export default {
  name: 'ruleManager',
  components: {propertyManagerEdit},
  data() {
    return {
      dialogVisible: false,
      rows: [],
      pagination: {
        page: 1,
        pageSize: 50,
        total: 0
      },
      rule: {},
      groupList: [],
      controlTypeList: [
        {text: '数字', value: 'number'},
        {text: '下拉框', value: 'select'}
      ]
    }
  },
  computed: {
    tableHeight() {
      return this.$baseTableHeight()
    }
  },
  mounted() {
    this.getPropertyGroupList()
  },
  methods: {
    getPropertyGroupList() {
      course.getPropertyGroupList().then(resp => {
        this.groupList = resp
      })
    },
    initDefaultProperty() {
      course.initDefaultProperty().then(resp => {
        if (resp.state) {
          this.$message.success(resp.message)
          this.loadData()
        }
      })
    },
    showDialog(id) {
      this.$refs.propertyManagerEdit.showDialog(id, this.groupList)
    },
    loadData(param, cb) {
      course
        .getPropertyList(param || {})
        .then(resp => {
          let response = resp.data || resp
          this.rows = response.rows
          this.total = response.total
          this.pagination = {
            page: response.page,
            pageSize: response.pageSize,
            total: response.total
          }
        })
        .finally(() => cb && cb())
    },
    handleCommand(params) {
      switch (params.command) {
        case 'edit':
          this.$refs.propertyManagerEdit.showDialog(params.row.pksxid)
          break
        default:
          break
      }
    },
    removeValid() {
      if (this.$refs.htTable.selection.length == 0) {
        this.$message({message: '请至少选择一条记录', type: 'warning'})
        return false
      }
      return true
    },
    handleRemove() {
      const ids = []
      this.$refs.htTable.selection.forEach(item => {
        ids.push(item.pksxid)
      })
      course.removePropertyData(ids.join(',')).then(() => {
        this.loadData()
      })
    }
  }
}
</script>
